<template>
  <div class="home">
    <v-Head></v-Head>
    <div class="newPoster">
      <div class="content">
        <svg
          t="1739759038298"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6073"
          width="20"
          height="20"
        >
          <path
            d="M670.3616 126.1056a63.1808 63.1808 0 0 0-61.44-3.4816L307.8144 267.1104a12.1856 12.1856 0 0 1-5.12 1.2288H201.1648a113.152 113.152 0 0 0-112.9984 113.0496v241.1008a113.152 113.152 0 0 0 112.9984 113.0496h102.7072a12.288 12.288 0 0 1 5.12 1.1264l300.6464 139.2128a64.0512 64.0512 0 0 0 26.7776 5.9392 63.744 63.744 0 0 0 63.5904-63.6928V179.968a63.2832 63.2832 0 0 0-29.6448-53.8624z m-530.9952 496.64V381.3888a61.9008 61.9008 0 0 1 61.7984-61.8496h77.1072v364.8H201.1648a61.9008 61.9008 0 0 1-61.7984-61.8496z m509.5424 195.6352a12.3904 12.3904 0 0 1-17.664 11.264l-300.6464-139.4176a10.24 10.24 0 0 0-1.1264-0.4608V313.4976h0.512L631.0912 168.96a12.3392 12.3392 0 0 1 12.032 0.6656 12.1856 12.1856 0 0 1 5.7856 10.5472zM936.96 477.1328h-145.92a25.6 25.6 0 0 0 0 51.2H936.96a25.6 25.6 0 0 0 0-51.2zM812.1856 346.7776a25.6 25.6 0 0 0 18.0736-7.4752l103.2192-103.2192a25.6 25.6 0 0 0-36.1984-36.4032l-103.2192 103.3728a25.6 25.6 0 0 0 18.1248 43.7248zM830.2592 666.1632a25.6 25.6 0 0 0-36.1984 36.1984l103.2192 103.2192a25.6 25.6 0 1 0 36.1984-36.2496z"
            fill="#659ae8"
            p-id="6074"
          ></path>
        </svg>
        <span>最新公告</span>
      </div>

      <div class="carousel">
        <el-carousel height="26px" direction="vertical" :autoplay="true">
          <el-carousel-item v-for="(item, index) in posterList" :key="index">
            <div @click="poster" class="item">
              <h3>·{{ item.communityname }}</h3>
              <h3>·{{ item.title }}</h3>
              <h3>·{{ item.createtime }}</h3>
              <p>更多</p>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="middle">
      <!-- 顶部四个框 -->
      <div class="topFour">
        <div class="item">
          <img src="@/assets/avatar.png" alt="" />
          <div class="word">
            <h2>{{ userData.user }}</h2>
            <p>系统用户数</p>
          </div>
        </div>

        <div class="item">
          <img src="@/assets/text.png" alt="" />
          <div class="word">
            <h2>{{ userData.text }}</h2>
            <p>计费订单数量</p>
          </div>
        </div>

        <div class="item">
          <img src="@/assets/car.png" alt="" />
          <div class="word">
            <h2>{{ userData.car }}</h2>
            <p>车位总量</p>
          </div>
        </div>

        <div class="item">
          <img src="@/assets/edit.png" alt="" />
          <div class="word">
            <h2>{{ userData.edit }}</h2>
            <p>用户反馈数量</p>
          </div>
        </div>
      </div>

      <!-- echarts -->
      <div class="echarts">
        <div id="mainone"></div>
        <div id="maintwo"></div>
        <div id="mainthree"></div>
      </div>

      <!-- bottom -->
      <div class="bot">
        <div id="mainfour"></div>
        <div class="botTwo">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="repaircontent"
              align="left"
              label="维修内容"
              width="120"
            >
              <template slot-scope="scope">
                <span class="ellipsis">{{ scope.row.repaircontent }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="createtime"
              label="报修时间"
              width="220"
            >
            </el-table-column>
            <el-table-column prop="repairtype" label="状态">
              <template slot-scope="scope">
                <el-button type="success" plain v-if="scope.row.repairtype == 1"
                  >已修复</el-button
                >
                <el-button type="warning" plain v-if="scope.row.repairtype == 2"
                  >待处理</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <fourPagination
            :total="obj.total"
            @handleSize="handleSizeChange"
            @handleCurrent="handleCurrentChange"
          ></fourPagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../components/header";
import moment from "moment";
import * as echarts from "echarts";
import fourPagination from "../components/fourPagination.vue";
export default {
  name: "index",
  components: {
    vHead,
    fourPagination,
  },
  data() {
    return {
      obj: {
        // 页码
        currPage: 1,
        // 每页多少条
        pageNum: 4,
        total: null,
      },
      // 公告
      posterList: [],
      // 获取数据
      userData: {
        user: "",
        text: "",
        car: "",
        edit: "",
      },
      // 初始化数组
      arr: Array(32).fill(0),

      // chart1
      dataA_one: "",
      dataB_one: "",
      dataC_one: "",
      dataD_one: "",

      //   charts2
      dataA_two_one: "",
      dataA_two_two: "",
      dataA_two_three: "",
      dataB_two_one: "",
      dataB_two_two: "",
      dataB_two_three: "",
      dataC_two_one: "",
      dataC_two_two: "",
      dataC_two_three: "",
      dataD_two_one: "",
      dataD_two_two: "",
      dataD_two_three: "",

      //   echarts3
      dataA_three: "",
      dataB_three: "",
      dataC_three: "",
      dataD_three: "",
      dataE_three: "",
      dataF_three: "",

      // 报修维修表格
      tableData: [],
    };
  },
  methods: {
    // 初始化公告
    initPoster() {
      this.$axios({
        url: "/poster/getPosterData",
        method: "get",
        params: {
          currPage: 0,
          pageNum: 100,
        },
      }).then((res) => {
        // console.log(res.data.data, "poster");
        const datatable = res.data.data;
        // console.log(datatable,"table");

        for (let i = 0; i < res.data.data.length; i++) {
          const isoDate = res.data.data[i].createtime;
          // console.log(isoDate,"时间");

          const formattedDate = moment(isoDate).format("YYYY-MM-DD HH:mm:ss");
          datatable[i].createtime = formattedDate;
        }
        // console.log(res.data);
        this.posterList = datatable;
        // console.log(this.posterList);
      });
    },
    // 获取数据
    initData() {
      this.$axios({
        url: "/users/getUsersData",
        method: "get",
        params: {
          currPage: 0,
          pageNum: 4,
        },
      }).then((res) => {
        // console.log(res.data, "data");
        this.userData.user = res.data.total;
      });

      this.$axios({
        url: "/cost/getPayMessage",
        method: "get",
        params: {
          currPage: 0,
          pageNum: 4,
        },
      }).then((res) => {
        this.userData.text = res.data.total;
      });

      this.$axios({
        url: "/parking/getParkOrder",
        method: "get",
        params: {
          currPage: 0,
          pageNum: 4,
        },
      }).then((res) => {
        this.userData.car = res.data.total;
      });

      this.$axios({
        url: "/poster/getFeedBack",
        method: "get",
        params: {
          currPage: 0,
          pageNum: 4,
        },
      }).then((res) => {
        this.userData.edit = res.data.total;
      });
    },
    // 报修初始化
    initRepaire() {
      // 报修数据
      this.$axios({
        url: "/poster/getRepairData",
        method: "get",
        params: {
          currPage: this.obj.currPage - 1,
          pageNum: this.obj.pageNum,
        },
      }).then((res) => {
        const datatable = res.data.data;
        for (let i = 0; i < res.data.data.length; i++) {
          const isoDate = res.data.data[i].createtime;
          isoDate, "时间";
          const formattedDate = moment(isoDate).format("YYYY-MM-DD HH:mm:ss");
          datatable[i].createtime = formattedDate;
        } // console.log(res.data);
        this.tableData = datatable;
        this.obj.total = res.data.total;
      });
    },
    // 更多公告
    poster() {
      this.$router.push(
        {
          path: "/service/postMessage",
        },
        () => {},
        () => {}
      );
    },

    // 绘制echarts
    handleEchar() {
      let chartDom = document.getElementById("mainone");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "小区分布统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "小区分布",
            type: "pie",
            radius: "50%",
            data: [
              {
                value: this.dataA_one,
                name: "A区",
                itemStyle: { color: "#a6d8e6" },
              },
              {
                value: this.dataB_one,
                name: "B区",
                itemStyle: { color: "#b5f787" },
              },
              {
                value: this.dataC_one,
                name: "C区",
                itemStyle: { color: "#499ff7" },
              },
              {
                value: this.dataD_one,
                name: "D区",
                itemStyle: { color: "#ecdb57" },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //   window.onresize = () => {
      //     myChart.resize();
      //   };
    },
    // 绘制echarts柱状图
    handleEchar1() {
      var chartDom = document.getElementById("maintwo");
      var myChart1 = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "车位数/已分配量/已缴费",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["车位数", "已分配量", "已缴费"],
          right: "10",
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['A区车位', 'B区车位', 'C区车位', 'D区车位'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "车位数",
            type: "bar",
            data: [
              this.dataA_two_one,
              this.dataB_two_one,
              this.dataC_two_one,
              this.dataD_two_one,
            ],
            itemStyle: { color: "#5C7BD9" },
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: "{c}", // 标签格式器，{c} 代表数据值
            },
          },
          {
            name: "已分配量",
            type: "bar",
            data: [
              this.dataA_two_two,
              this.dataB_two_two,
              this.dataC_two_two,
              this.dataD_two_two,
              ,
            ],
            itemStyle: { color: "#91CC75" },
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: "{c}", // 标签格式器，{c} 代表数据值
            },
          },
          {
            name: "已缴费",
            type: "bar",
            data: [
              this.dataA_two_three,
              this.dataB_two_three,
              this.dataC_two_three,
              this.dataD_two_three,
            ],
            itemStyle: { color: "#DDB7FA" },
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              formatter: "{c}", // 标签格式器，{c} 代表数据值
            },
          },
        ],
      };

      option && myChart1.setOption(option);

      window.onresize = () => {
        myChart1.resize();
      };
    },

    // 绘制echarts环形图
    handleEchar2() {
      var chartDom = document.getElementById("mainthree");
      var myChart2 = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "缴费项目订单",
          right: "right",
        },
        legend: {
          data: ["计算项目"],
          left: "left",
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "电费单", max: 12, color: "black" },
            { name: "水费固定月单", max: 12, color: "black" },
            { name: "水费按量单", max: 12, color: "black" },
            { name: "天然气单", max: 12, color: "black" },
            { name: "物业费单", max: 12, color: "black" },
            { name: "宽带费单", max: 12, color: "black" },
          ],
          splitArea: {
            areaStyle: {
              color: "#fbe6e3",
            },
          },
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [
                  this.dataA_three,
                  this.dataB_three,
                  this.dataC_three,
                  this.dataD_three,
                  this.dataE_three,
                  this.dataF_three,
                ],
                name: "计算项目",
                itemStyle: { color: "#57BBFF" },
                label: {
                  show: true, // 显示标签
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
            ],
            areaStyle: {
              //   color: "#ffdad5",
              color: "#499ff7",
            },
          },
        ],
      };

      option && myChart2.setOption(option);

      //   window.onresize = () => {
      //     myChart2.resize();
      //   };
    },

    // 访问量绘制
    handleEchar3() {
      var chartDom = document.getElementById("mainfour");
      var myChart3 = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "当月用户访问情况",
          left: "left",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            animation: false,
          },
        },
        legend: {
          left: "center",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: {
              show: true,
              readOnly: false,
              iconStyle: { borderColor: "#28B283" },
            },
            restore: { show: true, iconStyle: { borderColor: "#28B283" } },
            saveAsImage: { show: true, iconStyle: { borderColor: "#28B283" } },
            magicType: {
              show: true,
              type: ["bar", "line"],
              iconStyle: { borderColor: "#28B283" },
            },
            dataZoom: {
              show: true,
              iconStyle: { borderColor: "#28B283" },
            },
          },
        },
        xAxis: {
          type: "category",
          splitLine: { show: false },
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "用户访问量",
            type: "line",
            right: "center",
            itemStyle: { color: "#28B283" },
            data: this.arr,
            smooth: true,
          },
        ],
      };

      option && myChart3.setOption(option);

      window.onresize = () => {
        myChart3.resize();
      };
    },

    // echarts
    echartsfun() {
      return Promise.all([
        // first
        this.$axios({
          url: "/house/searchList?unitname=A",
          method: "get",
          params: {
            currPage: 1,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataA_one = res.data.total;
        }),

        this.$axios({
          url: "/house/searchList?unitname=B",
          method: "get",
          params: {
            currPage: 1,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataB_one = res.data.total;
        }),

        this.$axios({
          url: "/house/searchList?unitname=C",
          method: "get",
          params: {
            currPage: 1,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataC_one = res.data.total;
        }),

        this.$axios({
          url: "/house/searchList?unitname=D",
          method: "get",
          params: {
            currPage: 1,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataD_one = res.data.total;
        }),

        // second
        // A
        this.$axios({
          url: "/parking/getParkData?parkname=A",
          method: "get",
          params: {
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataA_two_one = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkData?parkname=A",
          method: "get",
          params: {
            parkstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataA_two_two = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkOrder?parkname=A",
          method: "get",
          params: {
            orderstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataA_two_three = res.data.total;
        }),

        // B
        this.$axios({
          url: "/parking/getParkData?parkname=B",
          method: "get",
          params: {
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataB_two_one = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkData?parkname=B",
          method: "get",
          params: {
            parkstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataB_two_two = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkOrder?parkname=B",
          method: "get",
          params: {
            orderstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataB_two_three = res.data.total;
        }),

        // C
        this.$axios({
          url: "/parking/getParkData?parkname=C",
          method: "get",
          params: {
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataC_two_one = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkData?parkname=C",
          method: "get",
          params: {
            parkstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataC_two_two = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkOrder?parkname=C",
          method: "get",
          params: {
            orderstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataC_two_three = res.data.total;
        }),

        // D
        this.$axios({
          url: "/parking/getParkData?parkname=D",
          method: "get",
          params: {
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataD_two_one = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkData?parkname=D",
          method: "get",
          params: {
            parkstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataD_two_two = res.data.total;
        }),

        this.$axios({
          url: "/parking/getParkOrder?parkname=D",
          method: "get",
          params: {
            orderstatus: 1,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          // console.log(res, "res");
          this.dataD_two_three = res.data.total;
        }),

        // third
        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 7,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataA_three = res.data.total;
        }),

        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 8,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataB_three = res.data.total;
        }),

        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 9,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataC_three = res.data.total;
        }),

        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 10,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataD_three = res.data.total;
        }),

        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 11,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataE_three = res.data.total;
        }),

        this.$axios({
          url: "/cost/getCostData",
          method: "get",
          params: {
            c_id: 12,
            currPage: 0,
            pageNum: 4,
          },
        }).then((res) => {
          this.dataF_three = res.data.total;
        }),

        // 访问量
        this.$axios({
          url: "/users/getLoginMonth",
          method: "get",
          params: {},
        }).then((res) => {
          console.log(res.data, "resdata");

          for (let i = 0; i < res.data.length; i++) {
            var num = res.data[i].createtime.substring(8, 10);

            if (num.substring(0, 1) == 0) {
              var real = num.substring(1, 2);

              this.arr[Number(real)]++;
            } else {
              this.arr[num]++;
            }
          }
        }),
      ]);
    },

    // 分页开始
    handleSizeChange(val) {
      console.log(val, "接收");
      // 当我点击每页多少条的时候赋值并重新渲染页面
      this.obj.pageNum = val;
      this.initRepaire();
    },
    handleCurrentChange(val) {
      console.log(val, "接收");
      // 当我点击页码的时候将页码赋值给变量并重新渲染页面
      this.obj.currPage = val;
      this.initRepaire();
    },
    // 分页结束
  },
  async mounted() {
    try {
      // 公告
      this.initPoster();
      // 获取数据
      this.initData();
      // 报修初始化
      this.initRepaire();
      // 获取echarts
      await this.echartsfun();
      this.handleEchar();
      this.handleEchar1();
      this.handleEchar2();
      this.handleEchar3();
    } catch (error) {
      console.log("err");
    }
  },
};
</script>

<style lang="scss" scoped>
.home::v-deep {
  .newPoster {
    display: flex;
    background-color: #fff;
    padding-top: 56px;
    // border: 1px solid #4995F7;
    width: 100%;

    .content {
      width: 10%;
      padding: 20px;
      height: 30px;

      svg {
        position: absolute;
        top: 80px;
      }

      span {
        margin-left: 26px;
        color: #4995f7;
        line-height: 30px;
        font-size: 14px;
      }
    }

    .carousel {
      width: 90%;
      padding: 20px;
      height: 30px;
      .item {
        cursor: pointer;
        display: flex;
        h3 {
          font-size: 18px;
          &:nth-of-type(2) {
            margin-left: 20%;
          }
          &:nth-of-type(3) {
            margin-left: 30%;
          }
        }
        p {
          color: #4995f7;
          margin-left: 1%;
          cursor: pointer;
        }
      }
    }
  }

  .middle {
    padding: 20px;
    height: 600px;
    background-color: #eee;

    .topFour {
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        border-radius: 10px;
        padding: 2% 4%;

        img {
          width: 50px;
          height: 50px;
        }

        background-color: #fff;
        width: 16%;

        .word {
          margin-left: 30%;
        }
      }
    }

    // echatrs
    .echarts {
      margin-top: 1%;
      display: flex;
      justify-content: space-between;

      #mainone {
        padding: 1%;
        border-radius: 10px;
        background-color: #fff;
        width: 30%;
        height: 210px;
      }

      #maintwo {
        padding: 1%;
        border-radius: 10px;
        background-color: #fff;
        width: 31%;
        height: 210px;
      }

      #mainthree {
        padding: 1%;
        border-radius: 10px;
        background-color: #fff;
        width: 30%;
        height: 210px;
      }
    }

    .bot {
      margin: 1% 0;
      display: flex;

      #mainfour {
        padding: 1%;
        width: 68%;
        height: 190px;
        background-color: #fff;
        border-radius: 10px;
      }

      .botTwo {
        width: 29%;
        margin-left: 1%;
        height: 220px;
        background-color: #fff;
        border-radius: 10px;

        .el-table {
          height: 180px;

          .el-table__row {
            .el-table__cell {
              // height: 10px!important;
              padding: 6px 0;
            }
            .el-button {
              // height: 10px;
              padding: 2px;
            }
          }
        }
      }

      .pagination {
        text-align: center;
      }
    }

    .ellipsis {
      display: -webkit-box;
      /* 必须设置，用于多行溢出 */
      -webkit-box-orient: vertical;
      /* 设置盒子排列方向为垂直 */
      -webkit-line-clamp: 1;
      /* 限制显示的行数，例如显示 3 行 */
      overflow: hidden;
      /* 隐藏超出的内容 */
      width: 100px;
    }
  }
}
</style>
